<template>
    <div>
        <el-dialog title="电站详情" :visible.sync="dialogViewVisible" width="60%" :show-close="false"
            :close-on-click-modal="false" style="height: 100%;" custom-class="customclassdialog">
            <el-form :model="form" style="width: 100%;overflow-y: auto;padding-right: 10px;"
                :style="'max-height:' + windowHeight + 'px;'">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电站图片:" :label-width="formLabelWidth">
                            <el-image style="width: 100%;" :src="form.image_all" :preview-src-list="[form.image_all]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电站名称:" :label-width="formLabelWidth">
                            {{ form.name }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属企业:" :label-width="formLabelWidth">
                            {{ retfundata(enterpriseoptions,form.admin_id) }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="区域数:" :label-width="formLabelWidth">
                            {{ form.regionCount }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="设备数:" :label-width="formLabelWidth">
                            {{ form.equCount }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="正常数:" :label-width="formLabelWidth">
                            {{ form.equNormal }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="故障数:" :label-width="formLabelWidth">
                            {{ form.equQuestion }}
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="保护状态:" :label-width="formLabelWidth">
                            {{ form.powerstationprotect }}
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="6">
                        <el-form-item label="电站经纬度:" :label-width="formLabelWidth">
                            <el-tag size="mini">{{ form.longitude }}</el-tag>
                            <el-tag size="mini" type="danger" style="margin-left: 5px;">{{ form.latitude
                                }}</el-tag>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电站地址:" :label-width="formLabelWidth">
                            {{ form.address }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注:" :label-width="formLabelWidth">
                            {{ form.des }}
                        </el-form-item>
                    </el-col>
                   
                    <el-col :span="24">
                        
                        <el-form-item label="地图:" :label-width="formLabelWidth" v-if="dialogViewVisible">
                            <div style="width: 100%;height: 300px;">
                                <baidu-map :center="{ lng: form.longitude, lat: form.latitude }" :map-click="false"
                                    scroll-wheel-zoom :zoom="zoom" style="height: 100%;width: 100%;" @ready="initMap"
                                    :auto-resize="false">
                                    <bm-marker :position="{ lng: form.longitude, lat: form.latitude }" :clicking="false">
    </bm-marker>
                                </baidu-map>
                            </div>
                        </el-form-item>
                    </el-col>


                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonViewcomponents',
    props: {
        optionVal: {
            type: Object
        },
        dialogViewVisible: {
            type: Boolean
        },
        enterpriseoptions:{
            type:Array
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
            },
            deep: true,
            immediate: true
        }
    },
    data() {
        return {
            formLabelWidth: '100px',
            form: {},
            srcList: [],
            windowHeight: 0,
            zoom: 15,
            newMap: null,
        };
    },
    mounted() {
        this.windowHeight = document.body.clientHeight-280;
    },

    methods: {
        retfundata(data, iv) {
            let str = ''
            data.map(item => {
                if (item.id == iv) {
                    str = item.name
                }
            })
            return str
        },
        initMap({ BMap, map }) {
            const that = this
            console.log('编辑', that.form);
            that.newMap = map
            map.clearOverlays() //清除地图上所有覆盖物
            let point = {
                lng: that.form.longitude,
                lat: that.form.latitude
            }
            // let mk = new BMap.Marker(point)
            // map.addOverlay(mk)
            map.panTo(point)
        },
        cancel() {
            this.$emit('viewHeld', false);
        }
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from { 
//         opacity: 0;
//         transform: translateY(-100%);
//     }
//     to { 
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }
// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }
::v-deep .BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none !important;
}

::v-deep .anchorBL {
    display: none !important;
}
</style>